import React, { Component } from 'react';
import BarGraph from '../bargraph/BarGraph';
import { Scroll } from '../common-ui-parts';
import HeadLine, { HEAD_LINE_COLOR } from '../common-ui-parts/HeadLine';
import ArrowTriangle from '../common-ui-parts/ArrowTriangle';
import CommonConstants from '../../constants/CommonConstants';

/**
 * 詳細：胃がん
 */
class Detail extends Component {
  scrollTop() {
    this.refs.scrollArea.scrollTop();
  }

  render() {
    const { probability, diagnosis } = this.props;
    return (
      <div className="Detail">
        <Scroll
          ref="scrollArea"
          fixedHeight={CommonConstants.SCROLL_FIXED_HIGHT.DETAIL}
          customStyle={CommonConstants.SCROLL_Z}
        >
          <div className="report-card">
            <div className="card-content">
              <p className="top-content">
                あなたは血液検査に基づく胃がんのリスク分類（ABC分類）の<strong>{diagnosis.category}群</strong>ですね。<br />
                ABC分類に基づく今後10年の間に胃がんになる危険度は以下のようになります。
              </p>
              <HeadLine
                level={1}
                color={HEAD_LINE_COLOR.ORANGE}
              >
                ABC分類、性別、年齢に基づく<br/>今後10年の間に胃がんになる危険度
              </HeadLine>
              <div className="risk-bar-graph">
                <BarGraph
                  labelSize="24px"
                  decimalDigit={2}
                  data={[
                    {
                      label: 'A群',
                      value: diagnosis.categorya,
                      active: diagnosis.category === 'A' ? true : false,
                    },
                    {
                      label: 'B群',
                      value: diagnosis.categoryb,
                      active: diagnosis.category === 'B' ? true : false,
                    },
                    {
                      label: 'C群',
                      value: diagnosis.categoryc,
                      active: diagnosis.category === 'C' ? true : false,
                    },
                    {
                      label: 'D群',
                      value: diagnosis.categoryd,
                      active: diagnosis.category === 'D' ? true : false,
                    },
                  ]}
                />
              </div>
            </div>

            <ArrowTriangle />

            <div className="card-content">
              <p>さらに他のリスク因子（<strong>喫煙、塩蔵品の摂取、胃がんの家族歴の状況</strong>）を加えると、危険度の値はこのようになります。</p>
              <HeadLine
                level={1}
                color={HEAD_LINE_COLOR.BLUE}
              >
                {diagnosis.category}群
              </HeadLine>
              <div className="risk-bar-graph">
                <BarGraph
                  activeColor="#0e7cdc"
                  inactiveColor="#86b9e5"
                  labelSize="24px"
                  decimalDigit={2}
                  data={[
                    {
                      label: ['他のリスク因子', 'が最小の場合'],
                      value: probability.min,
                    },
                    {
                      label: 'あなた',
                      value: probability.you,
                      active: true,
                    },
                    {
                      label: ['他のリスク因子', 'が最大の場合'],
                      value: probability.max,
                    },
                  ]}
                />
              </div>
            </div>
            <div className="card-content">
              <HeadLine
                level={1}
                color={HEAD_LINE_COLOR.BLUE}
              >
                あなたのリスク因子
              </HeadLine>
              <table className="report-table detail-table">
                <tbody>
                  <tr>
                    <th style={{ width: '80%' }}>喫煙</th>
                    <td style={{ width: '20%' }}>{diagnosis.smokingFactor}</td>
                  </tr>
                  <tr>
                    <th>塩蔵品摂取</th>
                    <td>{diagnosis.salineFoodFactor}</td>
                  </tr>
                  <tr>
                    <th>家族歴</th>
                    <td>{diagnosis.familyAnamnesisFactor}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </Scroll>
      </div>
    );
  }
}
/*
Detail.propTypes = {
  probability: React.PropTypes.shape({
    you: React.PropTypes.number.isRequired,
    min: React.PropTypes.number.isRequired,
    max: React.PropTypes.number.isRequired,
  }),
  diagnosis: React.PropTypes.shape({
    category: React.PropTypes.string.isRequired,
    categorya: React.PropTypes.number.isRequired,
    categoryb: React.PropTypes.number.isRequired,
    categoryc: React.PropTypes.number.isRequired,
    categoryd: React.PropTypes.number.isRequired,
    smokingFactor: React.PropTypes.string.isRequired,
    salineFoodFactor: React.PropTypes.string.isRequired,
    familyAnamnesisFactor: React.PropTypes.string.isRequired,
  }),
};*/

export default Detail
